<template>
  <div class="list-comment-item">
    <!-- 初始模板注释化保留 -->
    <!-- <div class="user-info">
      <van-image
        width="10vw"
        height="10vw"
        fit="cover"
        :src="require('../assets/wxm.jpg')"
        round
      />
      <div class="nameRate-container">
        <div class="user-name">璃月事务所总经理甘雨nanoda</div>
        <div class="user-rate">
          <rate-readonly score="9" size="3vw"></rate-readonly>
        </div>
      </div>
    </div>
    <div class="comment-content">不错，看完了Zzzzzzzzzzzzzzzzzzzzzzz</div>
    <div class="comment-date">2022-07-26</div> -->
    <div class="user-info">
      <van-image
        width="10vw"
        height="10vw"
        fit="cover"
        :src="baseURL + commentData.avatar"
        round
      />
      <div class="nameRate-container">
        <div class="user-name">{{ commentData.username }}</div>
        <div class="user-rate">
          <rate-readonly
            :score="commentData.userScore"
            size="3vw"
          ></rate-readonly>
        </div>
      </div>
    </div>
    <div class="comment-content">{{ commentData.content }}</div>
  </div>
</template>

<script>
import RateReadonly from "./RateReadonly.vue";
export default {
  components: { RateReadonly },
  props: ["commentData"],
  data() {
    return {
      baseURL: "http://10.36.4.254:8080/",
    };
  },
  beforeMount() {
    console.log("commentItem接受的数据：");
    console.log(this.commentData);
  },
};
</script>

<style lang="scss" scoped>
.list-comment-item {
  width: 100%;
  padding: 4.4284vw 0 2.6vw;
  // border-bottom: 0.08vw solid hsla(0, 0%, 100%, 0.08);
  border-bottom: 0.08vw solid #464959;

  > .user-info {
    margin-bottom: 2.1vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    font-size: 3.38vw;
    .nameRate-container {
      margin-left: 2vw;

      > .user-rate {
        margin-top: 1vw;
        font-size: 3vw;
        line-height: 3vw;
      }
    }
  }
  > .comment-content {
    color: #fff;
    font-size: 3.38vw;
    line-height: 4.8vw;
  }
  > .comment-date {
    opacity: 0.3;
  }
}
</style>